<!--
 * @Author: your name
 * @Date: 2021-09-06 16:25:29
 * @LastEditTime: 2021-09-10 15:02:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \code\ej-webui-team\src\pages\production\index.vue
-->
<template>
    <div class="xitong">
        <div class="btn">
        <!--查询  -->     
        <!-- {{params}}  {{time}}  {{time[0]}} -->
            <el-form :inline="true"  class="demo-form-inline">
              <el-form-item>
                  <div class="block">
                    <el-date-picker
                      v-model="time"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right">
                </el-date-picker>
                   </div>
              </el-form-item>
              <el-form-item>
                <el-select v-model="params.type" placeholder="请选择类型" clearable>
                  <el-option label="充值" value="充值"></el-option>
                  <el-option label="收益" value="收益"></el-option>
                  <el-option label="提现" value="体现"></el-option>
                </el-select>
              </el-form-item>
               <el-form-item>
                <el-select v-model="params.status" placeholder="请选择状态" clearable>
                  <el-option label="正常" value="正常"></el-option>
                  <el-option label="未审核" value="未审核"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>                  
        </div>
        <div class="table">
            <!-- 表格 -->
             <el-table :data="resData.list" stripe  style="width: 100%">
                <el-table-column prop="userId"  label="编号"  width="180"></el-table-column>
                <el-table-column prop="transferMoney" label="交易金额" width="180"></el-table-column>
                <el-table-column label="交易时间" width="180">
                  <template v-slot="scope">
                    {{ scope.row.orderTime | fmtDate }}
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="交易类型" width="180"></el-table-column>
                 <el-table-column label="状态" prop="status">
                    <template v-slot="scope">
                        <el-tag
                        v-if="scope.row.status=='正常'"
                        size="mini"
                        type="success"
                    >{{scope.row.status}}</el-tag>
                    <el-tag v-else size="mini" type="danger">{{scope.row.status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" ></el-table-column>
             </el-table>
             <!-- 分页 -->
             <el-pagination
               background
               @size-change="pageSizeChangeHandler"
               :page-sizes="[5, 10, 15]"
               @current-change="pageChangeHandler"
               layout="prev, pager, next,sizes"
               :current-page="params.page"
               :page-size="params.pageSize"
               :total="resData.total">
             </el-pagination>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
export default {
  data() {
    return {
        time:[],
        categories:[1,23],
        params:{
            page:1,
            pageSize:10,
        },
        resData:{},
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
    };
  },
  methods: {
    //   分页查询产品表格
      async pageQuery(){
        for(let key in this.parmas){
          if(this.parmas[key]==""){
            delete this.parmas[key];
          }
        }
         let res=await request.get('/account/pageQuerySystemAccount',{
             params:this.params
         })
         this.resData=res.data;
      },
    //   分页事件
      pageChangeHandler(page){
          this.params.page=page;
          this.pageQuery();
      },
      pageSizeChangeHandler(pageSize){
           this.params.pageSize=pageSize;
           this.pageQuery();
      },
      // 时间      
      onSubmit() {   
          if(this.time.length > 0) {
          this.params.begintime = this.time[0].getTime()
          this.params.endtime = this.time[1].getTime()
        }   
         this.pageQuery()
      },       
  },
  created(){
      this.pageQuery();
  }
}
</script>
<style>

</style>